---
title: Login Page
description: Displays an 8-bit two column login page with cover image.
---

import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/login-page"
    command="pnpm dlx shadcn@latest add @8bitcn/login-page"
  />
</div>

<div className="border rounded-lg p-4 my-4">
  <p className="text-sm text-muted-foreground mb-4">
    A complete two-column login page layout with a retro cover image on one side and the login form on the other. Perfect for full-page authentication flows.
  </p>
  <a href="/login" target="_blank" className="text-primary hover:underline">
    View full Login Page demo →
  </a>
</div>

## Installation

---

<InstallationCommands packageName="login-page" />

## Usage

---

```tsx
import LoginPage from "@/components/ui/8bit/blocks/login-page"
```

```tsx
// Use as a full page component
export default function Page() {
  return <LoginPage />
}
```

